<template>
	<view class="login">
		<view class="login-form">
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput prefixIcon="person-filled" v-model="formData.username" focus placeholder="请输入用户名"
						:styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="formData.password" prefixIcon="locked-filled" type="password"
						placeholder="请输入密码" :styles="inputStyles" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn-submit" @click="handleLogin">登录</button>
			<text class="forget-password">忘记密码？</text>
		</view>
		<view class="no-account">
			<text>还没有账号？</text>
			<text class="to-register" @click="handleToRegister">马上注册</text>
		</view>
	</view>
</template>

<script>
	import login from '../../api/login/index.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				inputStyles: {
					borderColor: '#8be627',
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				},
			}
		},
		methods: {
			...mapActions('login', ['setLoginInfo']),
			handleToRegister() {
				uni.navigateTo({
					url: '/pages/avatar/register'
				})
			},
			handleLogin() {
				this.$refs['form'].validate().then((res) => {
					this.setLoginInfo(this.formData).then(res1 => {
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.switchTab({
								url: '/pages/avatar/avatar'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '用户名或密码错误登录失败',
							icon: 'error',
						})
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		background-image: url('https://img0.baidu.com/it/u=4251799645,3797204950&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=641');
		background-size: cover;
		background-color: $uni-bg-color;

		.login-form {
			text-align: center;
			padding: 400rpx 50rpx 0 50rpx;

			.btn-submit {
				background-color: $uni-primary;
				border-radius: 100rpx;
				color: $uni-white;
			}

			.forget-password {
				display: inline-block;
				padding-top: 20rpx;
				color: #ff5500;
			}
		}

		.no-account {
			position: fixed;
			top: 90%;
			left: 32%;

			.to-register {
				display: inline-block;
				color: #ff5500;
			}
		}
	}
</style>